<template>
  <view class="main">
    <view class="top">
      <search leftWidth='200' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>取消</text>
          </view>
        </blockquote>
        <blockquote class="right" slot="rightMain">
          <text @click="publish" class="fb">发布</text>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <view class="text">
        <textarea maxlength='1000' v-model="textarea" placeholder="请输入内容" />
        <!-- <textarea v-model="textarea" name="" id="" cols="30" rows="10"></textarea> -->
        <!-- <u--textarea v-model="textarea" placeholder="请输入内容"></u--textarea> -->
      </view>
      <view style="font-size: 20rpx; color: #c00000;">
        点击上传图片
      </view>
      <view class="pic">
        <u-upload width="160" height="160" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
          multiple :maxCount="10">
        </u-upload>
      </view>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue"
  import {
    mapState,
    mapMutations
  } from "vuex"
  import {
    fabudailyrecord,
    getfabudailyrecord
  } from "@/api/user.js"
  import {
    cmode
  } from '../../env.js'
  export default {
    components: {
      search
    },
    data() {
      return {
        fileList1: [],
        textarea: "",
        lock: true,
        fabulock: true
      };
    },
    methods: {
      ...mapMutations("m_login", ["setFabuinfo"]),
      goBack() {
        this.$Router.back()
      }, // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      publish() {
        if (this.fileList1.map(e => e.uploadurl).length == 0 && !this.textarea) {
          return uni.$u.toast('未填写上传信息')
        }
        if (!this.lock) {
          return uni.$u.toast("正在上传请稍等")
        }
        if (!this.fabulock) {
          return uni.$u.toast("正在上传请稍等")
        }
        this.fabulock = false
        fabudailyrecord({
          imgs: this.fileList1.map(e => e.uploadurl),
          content: this.textarea
        }).then(res => {
          getfabudailyrecord().then(res => {
            this.setFabuinfo(res.data)
          })
          this.fabulock = true

          uni.$u.toast('发布成功，请在朋友圈查看')
          setTimeout(() => {
            this.$Router.push('/pages/index/index?to=1')
          }, 800)

        }).catch((err) => {
          return uni.$u.toast('发布错误')
        })
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: result.msg,
            url: cmode + '/' + result.data,
            uploadurl: '/' + result.data
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        this.lock = false
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${cmode}/admin/upload`, // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'fbimgs',
            header: {
              'Authorization': `Bearer ${uni.getStorageSync('token')}`
            },
            success: (res) => {

              resolve(JSON.parse(res.data))
            },
            fail: (err) => {
              console.log(err);
            },
            complete: () => {
              this.lock = true
            }
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  // /deep/ .uni-textarea-wrapper{
  //   height: auto!important;
  // }
  // /deep/ .uni-textarea-textarea{
  //   font-size: 28rpx!important;
  // }
  /deep/ .uni-textarea-textarea {
    width: calc(100vw - 40rpx) !important;
    height: 500rpx;
    font-size: 28rpx;
    color: black;
  }

  .left {
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }

  .main {
    width: 100vw;
    height: auto;

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .right {
        display: flex;

        .fb {
          font-size: 28rpx;
          color: #c00000;
        }

        .dw {
          margin: 0 10rpx;
        }
      }
    }

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 100rpx);
      color: black;
      padding: 20rpx;
      box-sizing: border-box;

      .text {
        width: calc(100vw - 40rpx);
        height: 500rpx;
      }

      .pic {
        margin-top: 40rpx;
      }
    }
  }
</style>
